<template>
  <ElContainer style="height: 100%">
    <ElMain>
      <vue3-pro-table ref="tableRef" style="width: 100%" :request="getList" :columns="state.columns"
        :search="state.search">
        <template #operate="scope">
          <el-button type="primary" icon="Tickets" @click="editRow(scope.row)">
            编辑</el-button>
          <el-button type="danger" icon="Delete" @click="delRow(scope.row)">
            删除</el-button>
        </template>
        <template #toolbar>
          <ElButton type="success" @click="addRow">新增</ElButton>
        </template>
      </vue3-pro-table>
    </ElMain>
  </ElContainer>

  <MyDialog v-bind="formDialog" v-model:visible="formDialog.visible">
    <FamilyArchives ref="dialogRef" :family-archive="familyArchive" />
  </MyDialog>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { delFamilyArchives, getFamilyArchiveById, getFamilyArchivesList } from "@/api/archives";
import useMyDialog from "@/components/MyDialog/useMyDialog";
import FamilyArchives from "@/views/Archive/FamilyArchives/index.vue";
const tableRef = ref();
const state = reactive({
  columns: [
    { label: "姓名", prop: "a00_02_06" },
    { label: "性别", prop: "a00_03_07" },
    { label: "出生日期", prop: "a00_03_09" },
    { label: "电话", prop: "a00_03_12" },
    { label: "身份证号码", prop: "a00_03_10" },
    { label: "家庭卡号", prop: "a00_03_08" },
    { label: "与户主关系", prop: "a00_03_08" },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      align: "center",
      tdSlot: "operate", // 自定义单元格内容的插槽名称
    },
  ],
  search: {
    fields: [
      {
        label: "姓名/身份证号",
        name: "name",
      },
    ],
  },
});
const dialogRef = ref();
const familyArchive = ref();
const formDialog = useMyDialog({
  title: "",
  visible: false,
  handleConfirmClick: async () => {
    await dialogRef.value.save();
    tableRef.value.refresh();
    return true;
  },
});

const editRow = async (row) => {
  formDialog.title = "编辑"
  familyArchive.value = await getFamilyArchiveById(row.id);
  formDialog.visible = true;
};
const delRow = async (row) => {
  await delFamilyArchives(row.id);
  tableRef.value.refresh();
};
const addRow = () => {
  formDialog.title = "新增"
  familyArchive.value = {}
  formDialog.visible = true
}
// 请求函数
const getList = async (params) => {
  // params是从组件接收的，包含分页和搜索字段。
  const data: any = await getFamilyArchivesList(params);
  // 必须要返回一个对象，包含data数组和total总数
  return {
    data: data.data,
    total: +data.total,
  };
};
</script>

<style scoped>

</style>
